var app=new Vue({
    el:"#app",
    data:{
        gameState:0, //0 未开始 1 进行中 2暂停中
        width:25,  //格子长  y坐标
        height:15,  //格子宽  x坐标

        boxArr:[],  //格子数组

        snakeArr:[],  //蛇数组
        snakeArrow:39,  //蛇头方向，38 39 40 37，上右下左
        food:null,

        timer:null, //定时器编号
        speed:100  //游戏速度
    },
    mounted:function(){
        document.onkeydown=this.jianpan;
        this.initBox();
        
        //this.startGame();
    },
    methods:{
        // 键盘按键处理
        jianpan:function(ev){
            this.inputCtrl(ev.keyCode);
        },

        // 输入处理
        inputCtrl:function(kc){
            if ([38,39,40,37].indexOf(kc)===-1){
                return;
            }
            
            if (this.snakeArrow===38 && kc===40)
            {
                return;
            }

            if (this.snakeArrow===40 && kc===38)
            {
                return;
            }

            if (this.snakeArrow===39 && kc===37)
            {
                return;
            }

            if (this.snakeArrow===37 && kc===39)
            {
                return;
            }

            this.snakeArrow=kc;
        },

        // 初始化游戏区域
        initBox:function(){
            for(let i=0;i<this.height;i++){
                this.boxArr.push([]);
                for(let j=0;j<this.width;j++){
                    this.boxArr[i].push({
                        x:i,
                        y:j,
                        snake:false,
                        food:false
                    });
                }
            }
        },

        //初始化蛇
        initSnake:function(){
            this.snakeArr=[];
            let head={x:rnd(3,this.height-3),y:rnd(3,this.width-3)};
            this.snakeArr.push(head);
            for (let value of this.snakeArr){
                this.boxArr[value.x][value.y].snake=true;
            }
        },

        //生成食物
        createFood:function(){
            this.food={x:rnd(2,this.height-2),y:rnd(2,this.width-2)};
            this.boxArr[this.food.x][this.food.y].food=true;
        },

        //开始游戏
        startGame:function(){
            this.createFood();
            this.initSnake();
            this.timer=setInterval(()=>{
                this.frameRender();
            },this.speed);
            this.gameState=1;
        },

        //结束游戏
        endGame:function(){
            clearInterval(this.timer);
            //清除蛇
            for (let value of this.snakeArr){
                this.boxArr[value.x][value.y].snake=false;
            }
            //清除食物
            this.boxArr[this.food.x][this.food.y].food=false;
            this.gameState=0;
        },

        //暂停游戏
        pauseGame:function(){
            clearInterval(this.timer);
            this.gameState=2;
        },

        //恢复游戏
        restartGame:function(){
            this.timer=setInterval(()=>{
                this.frameRender();
            },this.speed);
            this.gameState=1;
        },

        //关键帧
        frameRender:function(){
            let head=this.snakeArr[0];
            //计算新加块位置
            let additem={x:xVecal(head.x,this.snakeArrow),y:yVecal(head.y,this.snakeArrow)};
            if (this.isDie(additem)){
                console.log("僵硬")
                this.endGame();
                return;
            }
            this.snakeMove(additem);
        },

        //蛇体移动
        snakeMove:function(obj){
            //新加入块
            this.snakeArr.unshift(obj);
            //渲染
            this.boxArr[obj.x][obj.y].snake=true;
            //如果蛇头和食物坐标相同
            if (obj.x===this.food.x && obj.y===this.food.y)
            {
                //删掉现有食物
                this.boxArr[this.food.x][this.food.y].food=false;
                //新加食物
                this.createFood();
            }else{
                //如果没吃到食物，删掉蛇尾
                let delitem=this.snakeArr.pop(this.snakeArr.length-1,1);
                this.boxArr[delitem.x][delitem.y].snake=false;
            }
            
        },

        //死亡判定
        isDie:function(obj){
            //出界
            if (obj.x <0 || obj.x>this.height-1 || obj.y<0 || obj.y>this.width-1)
            {
                return true;
            }
            //撞到蛇身
            for (let item of this.snakeArr)
            {
                if (obj.x===item.x && obj.y===item.y)
                {
                    return true;
                }
            }
            return false;
        }
    }
});

function rnd(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

function xVecal(num,arrow){
    switch(arrow){
        case 38:
            return num-1;
            break;
        case 40:
            return num+1;
            break;
        default:
            return num;
            break;
    }
}

function yVecal(num,arrow){
    switch(arrow)
    {
        case 39:
            return num+1;
            break;
        case 37:
            return num-1;
            break;
        default:
            return num;
            break;
    }
}